<template>

    <div class="big1" style="background-color: #3ba1ea">
      <div class="module" v-for="item in data.titlelist" :key="item.titleId">
        <div class="up">
          <div class="l1">{{ item.title }}</div>
              <div class="r1"
                   @click="modulepage1(item)">更多>>
              </div>
        </div>
        <div class="bottom" v-if="item.titleId===1">
          <div class="li" v-for="item1 in data.mydata1" :key="item1.id" @click="modulepage(item1, item)">
            ★
            <div class="r2">
              <div class="text" :title="item1.informName">
                {{item1.informName}}
              </div>
            </div>
            <h1 class="rr2">【{{item1.informDate}}】</h1>

          </div>
        </div>
        <div class="bottom" v-if="item.titleId===2">
          <div class="li" v-for="item1 in data.mydata2" :key="item1.id" @click="modulepage(item1, item)">
            ★
            <div class="r2">
              <div class="text" :title="item1.informName">
                {{item1.informName}}
              </div>
            </div>
            <h1 class="rr2">【{{item1.informDate}}】</h1>
          </div>
        </div>
          <div class="bottom" v-if="item.titleId===3">
            <div class="li" v-for="item1 in data.mydata3" :key="item1.id" @click="modulepage(item1, item)">
              ★
              <div class="r2">
                <div class="text" :title="item1.informName">
                  {{item1.informName}}
                </div>
              </div>
              <h1 class="rr2">【{{item1.informDate}}】</h1>
            </div>
          </div>
        <div class="bottom" v-if="item.titleId===4">
          <div class="li" v-for="item1 in data.mydata4" :key="item1.id" @click="modulepage(item1, item)">
            ★
            <div class="r2">
              <div class="text" :title="item1.informName">
                {{item1.informName}}
              </div>
            </div>
            <h1 class="rr2">【{{item1.informDate}}】</h1>
          </div>
        </div>

      </div>

    </div>
    <div class="bg"></div>




</template>
<script>
import {useRouter} from 'vue-router'
import {showOthersTitle, homelshowTi} from '../../../api/compoents.js'
import {reactive, onMounted} from 'vue'

export default {
  name: 'appModule1',
  setup() {
    const router = useRouter()
    const data = reactive({
      titlelist: [],
      mydata1:[],
      mydata2:[],
      mydata3:[],
      mydata4:[],
      // content: []
    })

    async function getshowOthersTitle() {
      const {data: res} = await showOthersTitle()
      const arr1 = res.allTitles
      // for (let i = 0; i < arr1.length; i++) {
      //   const item = arr1[i]
      //   const {data: res1} = await homelshowTi(item.titleId)
      //   if (res1.code === 200) {
      //     item._mydata = res1.allOthersList
      //     console.log('item._mydata---------',item._mydata)  // 四个标题下的新闻
      //     console.log('item._mydata时间时间---------',item._mydata[1].informDate)
      //   }
      // }
      const {data: res1} = await homelshowTi(1)
      if(res1.code === 200) {
        data.mydata1 = res1.allOthersList
        console.log('item._mydata111---------',data.mydata1)  // 四个标题下的新闻
        console.log(data.mydata1[0])
        // console.log('item._mydata时间时间---------',item._mydata[1].informDate)
      }

        const {data: res2} = await homelshowTi(2)
        if(res2.code === 200) {
          data.mydata2 = res2.allOthersList.slice(0,5)
          console.log('item._mydata222---------',data.mydata2)  // 四个标题下的新闻
          console.log(data.mydata1[0])
          // console.log('item._mydata时间时间---------',item._mydata[1].informDate)
        }

      const {data: res3} = await homelshowTi(3)
      if(res3.code === 200) {
        data.mydata3 = res3.allOthersList
        console.log('item._mydata333---------',data.mydata3)  // 四个标题下的新闻
        console.log(data.mydata1[0])
        // console.log('item._mydata时间时间---------',item._mydata[1].informDate)
      }
      const {data: res4} = await homelshowTi(4)
      if(res4.code === 200) {
        data.mydata4 = res4.allOthersList
        console.log('item._mydata444---------',data.mydata4)  // 四个标题下的新闻
        console.log(data.mydata1[0])
        // console.log('item._mydata时间时间---------',item._mydata[1].informDate)
      }


      data.titlelist = arr1
      console.log('arr1----',arr1)    //四个标题
    }

    function modulepage(i, father) {
      // router.push({
      const href = router.resolve({
        // 传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定
        path: '/page',
        query: {
          id: i.id,
          names: father.title,
          logn: 'B'
          // num:1
        }
      })
      window.open(href.href, '_blank')
    }

    function modulepage1(i) {
      console.log(i.titleId, '1111111111')
      console.log(i.title, '1111111111')
      const href = router.resolve({
          // 传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定
          path: '/about',
          query: {
            id: i.titleId,
            names: i.title,
            logn: 'D'
            // hoemsonid: son.id,
            // sonname: son.informName
            // num:1
          }
          // name:'Home',
          // params:{
          // num:1
        }
      )
      window.open(href.href, '_blank')
    }

    onMounted(async () => {
        await getshowOthersTitle()
        // function modulepage (i) {
        //   console.log(i, '111')
        //   this.$router.push(`/page?id=${i.id}&name=${data.titlelist.title}`)
        // }
        //
        // function hh () {
        //   if()
        // }
        // async function gethome1showTi () {
        //   const { data: res1 } = await home1showTi()
        //   console.log(res1)
        //   data.content = res1.allTitles
        // }

      }
    )
    return {
      data,
      modulepage,
      modulepage1,
      getshowOthersTitle
    }
  }
}
</script>
<style scoped lang="less">
@media screen and (max-width: 790px) {
  .bg {
    display:none;
  }
  .big1 {
    margin:0 auto!important;
    .module {
      --w: calc(var(--xd--fontsize) * 2);
      width: calc(var(--w) * 9);
      .bottom {
        .l2 {
          width: calc(var(--w) * 1.3);
          border-radius: 2px;
        }
        .r2 {

        }
      }

    }
  }

}



//.bg {
//  --w: calc(var(--xd--fontsize) * 2);
//  position: relative;
//  width: 100vw;
//  height: calc(var(--w) * 11.5);
//  //background-color: #0a77be;
//  //background-image: url("../../../assets/img/9.jpeg");
//  top:calc(var(--w) * -5.2);
//  border-radius: 0 0 calc(var(--w) * .2) calc(var(--w) * .2);
//}

.big1 {
  --w: calc(var(--xd--fontsize) * 2);
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  justify-content: space-evenly;
  width: 80vw;
  height:calc(var(--w) * 9);
  /* height: 100px; */
  margin-top: calc(var(--w) * 1);
  margin-left:15vw;
  /*margin: calc(var(--w) * 1) auto;*/
  /* background: red; */
  box-sizing: border-box;
  background-color: #fff!important;
  //background: url("../../../assets/img/15.jpg");
  //background-repeat:repeat-x ;

}

.module {
  z-index:2;

  width: calc(var(--w) * 7);
  /*background: #9bccef!important;*/
  margin: 2vw .1vw;
  //border-radius: calc(var(--w) * .1);
  /* min-width: 200px; */
}


.up {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: calc(var(--w) * .03) solid rgb(194, 193, 193);
  padding: 0 calc(var(--w) * .5);
  font-size: calc(var(--xd--fontsize) * .7);
  /* margin:0 calc(var(--w) * .25) ; */
}

.l1 {
  padding: calc(var(--xd--fontsize) * .5) 0;
  /* margin-left: calc(var(--w) * .25); */
  font-weight: 700;
  border-bottom: 4px solid #3e6db5;
}

.r1 {
  padding: calc(var(--xd--fontsize) * .5) 0;
  padding-top: calc(var(--xd--fontsize) * .8);
  cursor: pointer;
  font-size: calc(var(--xd--fontsize) * .5);
  /* margin-right: calc(var(--w) * .25); */
}
.rr2 {
  //padding-left:calc(var(--xd--fontsize) * .5);
  padding-right:calc(var(--xd--fontsize) * .2);

}
.bottom {
  cursor: pointer;
  padding: 0 calc(var(--w) * .1);
}

.bottom :last-child {
  border: 0;
}

/* .bottom :first-child {
  .li .l2 h1{
    background: red;
  }
} */
.li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  //border-bottom: calc(var(--w) * .03) solid rgb(194, 193, 193);
  height: calc(var(--w) * .6);
}


.l2 {
  width: calc(var(--w) * 1);
  height: calc(var(--w) * .8);
  margin: calc(var(--w) * .25) 0;
  border-radius: calc(var(--w) * .2);
  border: calc(var(--w) * .05) solid rgb(194, 193, 193);
  overflow: hidden;
}

.l2 h1 {
  /*padding-top: calc(var(--w) * .2);*/
  /*padding-bottom: calc(var(--w) * .1);*/
  height: calc(var(--w) * .45);
  line-height:calc(var(--w) * .45);
  font-size: calc(var(--xd--fontsize) * .4);
  border-bottom: calc(var(--w) * .03) solid rgb(194, 193, 193);
  background: #1f85d8;
  color: #fff;
}

.hh1 {
  background: red !important;
}

.l2 p {
  padding-top: calc(var(--w) * .08);
  font-size: calc(var(--xd--fontsize) * .3);
  /* border: calc(var(--w) * .05) solid rgb(194, 193, 193)!important; */
}

.r2 {
  flex: 1;
  margin: calc(var(--w) * .25) 0;
  padding-right: calc(var(--w) * .1);
  padding-left: calc(var(--w) * .3);
  /* height: calc(var(--w) * 5); */
  line-height: calc(var(--w) * .3);
  font-size: calc(var(--w) * .25);
  letter-spacing: calc(var(--xd--fontsize) * .02);
  /* 下面三行实现只显示单行文本，超出部分省略的效果 */
  /* white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden; */
}

.text {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: left;
  /* 上面六行代码实现多行文本超出部分显示省略号  */
}
.text:hover {
  color: #2292e3;
}

</style>
